<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('用户管理')" >

</head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    var editor = null;
    $(function(){
        var data4Vue = {
            uri:'news',
            beans: [],
            bean: { id: 0, title: '',describe:''},
            editor:null,
            pagination:{},
            file: null
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                var E = window.wangEditor
                editor = new E('#editor')
                // 或者 var editor = new E( document.getElementById('editor') )// 允许上传到七牛云存储

                // 配置服务器端地址
                editor.customConfig.uploadImgServer = '/upload'
                // 将图片大小限制为 3M
                editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
                // 自定义上传参数
                editor.customConfig.uploadFileName = 'image';
                editor.customConfig.uploadImgHooks = {
                    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                    customInsert : function(insertImg, result, editor) {
                        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                        var url = result.url
                        insertImg(url)
                        // result 必须是一个 JSON 格式字符串！！！否则报错
                    }
                }
                // 必须放到有关于编辑器设置前面
                editor.create();

            },
            methods: {
                list:function(start){
                    var url =  this.uri+ "?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content   ;
                    });
                },
                add: function () {
                    // alert(editor.txt.html())
                    if(!checkEmpty(this.bean.title, "资讯标题"))
                        return;
                    if(!checkEmpty(this.file, "简介图片"))
                        return;
                    if(!checkEmpty(this.bean.describe, "简介"))
                        return;
                    var url = this.uri;
                    var content = editor.txt.html();
                    //axios.js 上传文件要用 formData 这种方式
                    var formData = new FormData();
                    formData.append("image", this.file);
                    formData.append("title", this.bean.title);
                    formData.append("describe", this.bean.describe);
                    formData.append("content",content)
                    axios.post(url,formData).then(function(response){
                        // vue.list(0);
                        vue.bean = { id: 0, title: '',describe:''};
                        $("#categoryPic").val('');
                        vue.file = null;

                        alert("提交完成！")
                        window.location.href = "/admin_news_list";

                    });
                },
                getFile: function (event) {
                    this.file = event.target.files[0];
                },

            }
        });
    });



    // 封装 console.log 函数
    function printLog(title, info) {
        window.console && console.log(title, info);
    }

</script>
<div id="workingArea" >
    <h1 class="label label-info" >上传文章</h1>
    <div class="panel panel-warning addDiv" style="width: 100%">
        <div class="panel-heading">添加资讯</div>
        <div class="panel-body" >
            <table class="addTable">
                <tr>
                    <td>新闻标题</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.title" type="text" class="form-control"></td>
                </tr>

                <tr>
                    <td>新闻概要</td>
                    <td><textarea  @keyup.enter="add" v-model.trim="bean.describe" type="text" class="form-control"></textarea></td>
                </tr>

                <tr>
                    <td>简介图片</td>
                    <td>
                        <input id="categoryPic" accept="image/*" type="file" name="image" @change="getFile($event)" />
                    </td>
                </tr>


                <div id="editor">
                    <p>在此处编写新闻</p>
                </div>


                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>





</div>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->

<script type="text/javascript" src="js/editor/wangEditor.min.js"></script>
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">

</script>
<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
